<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="keywords" content="">
		<meta name="description" content="">
		<link rel="shortcut icon" href="favicon.ico">
		<link href="css/bootstrap.min.css" rel="stylesheet" />

		<!--页面样式文件-->
		<link rel="stylesheet" href="css/new.css">

	</head>

	<body class="gray-bg">
		<!--右侧主体-->

		<div class="main">


			<!--统计区域-->
			<div class="statistics-info">
				<div class="statistics-list clearfix">
					<div class="statistics-item1 col-xs-6 col-sm-4 col-lg-4">
						<div class="statistics-top-item">
							<div class="left-btm">
								<img class="left-icon" src="img/statistics-icon-1.png" alt="">
							</div>
							<div class="right-btm">
								<div class="indro-title">今日气表值</div>
								<div class="indro-number">13858 <span class="uint">(m³)</span></div>
								<div class="indro-chan">同比昨日 <img class="indro-chan-icon" src="img/statistics-down.png" >10%</div>
							</div>
						</div>
					</div>
					
					<div class="statistics-item1 col-xs-6 col-sm-4 col-lg-4">
						<div class="statistics-top-item">
							<div class="left-btm">
								<img class="left-icon" src="img/statistics-icon-2.png"  alt="">
							</div>
							<div class="right-btm">
								<div class="indro-title">本月天然气用量</div>
								<div class="indro-number">13858 <span class="uint">(m³)</span></div>
								<div class="indro-chan">同比上月 <img class="indro-chan-icon" src="img/statistics-down.png" >10%</div>
							</div>
						</div>
					</div>
					
					<div class="statistics-item1 col-xs-6 col-sm-4 col-lg-4">
						<div class="statistics-top-item">
							<div class="left-btm">
								<img class="left-icon" src="img/statistics-icon-3.png"  alt="">
							</div>
							<div class="right-btm">
								<div class="indro-title">本年天然气用量</div>
								<div class="indro-number">13858 <span class="uint">(m³)</span></div>
								<div class="indro-chan">同比去年 <img class="indro-chan-icon" src="img/statistics-up.png" >10%</div>
							</div>
						</div>
					</div>

				</div>
			</div>

			<!--图表区域-->
			<div class="chart-btm">
				<div class="echart-item col-sm-12">
					<div id="main" style="width:96%;height:350px;"></div>
				</div>
			</div>

		</div>



		<script src="js/jquery.min.js"></script>

		<!--echart-->
		<script src="js/echarts.min.js"></script>

		<script>
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var xData = ['12.18', '12.19', '12.20', '12.21', '12.22', '12.23', '12.24', '12.25'];
			var yData = [20, 30, 40, 30, 40, 50, 40, 30];
	
			// 指定图表的配置项和数据
			var option = {
				legend: {
					data: ['气表'],
					right: '3%',
					selectedMode: false
				},
				title: {
					text: '一周气表走势图',
					x: 'center',
					textStyle: {
						fontSize: 26,
						color: '#2d353e'
					}
				},
				tooltip: {
					trigger: 'axis'
				},
				grid: {
					top: '21%',
					bottom: '7%',
					left: '7%',
					right: '5%'
				},
				xAxis: {
					name: '日期',
					nameTextStyle: {
						color: '#333',
						fontSize: 18,
					},
					data: xData,
					axisTick: {
						show: false
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#b8dbff'
						}
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#333',
							fontSize: 18,
						}
					}
				},
				yAxis: [{
					name: 'm³',
					nameTextStyle: {
						color: '#333',
						fontSize: 18,
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#ebeef1'
						}
					},
					axisTick: {
						show: false
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: '#b8dbff'
						}
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#333',
							fontSize: 18,
						}
					}
				}],
				series: [{
					name: '气表',
					type: 'line',
					barWidth: 12,
					symbolSize: 10,
					symbol: 'circle',
					emphasis: {
						itemStyle: {
							color: '#ff6d10'
						}
					},
					itemStyle: {
						normal: {
							color: '#ff6d10',
							barBorderRadius: [0, 0, 0, 0],
						}
					},
					data: yData
				}]
			};


			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>
	</body>

</html>
